<template>
  <!-- 侧边导航栏显示配置进度 -->
  <div class="stepbar-view">
    <div
      v-for="(item, index) in stepList"
      :key="index"
      class="stepbar-view-main"
    >
      <div class="view-main-title" @click="selectTitlemes(item)">
        <div
          class="title-lineone"
          :class="
            item.navindex === nowNavindex ? 'view-main-value-line-active' : ''
          "
        >
          {{ item.typename }}
        </div>
      </div>
      <div v-if="item.isshowChild" class="view-main-value">
        <!-- :class="itemtwo.stepid === nowstepid? 'view-main-value-line-active':''" -->
        <div
          v-for="(itemtwo, indextwo) in item.child"
          :key="'two' + indextwo"
          class="view-main-value-line"
          @click="slectedStep(itemtwo)"
        >
          {{ itemtwo.cockpitAssemblyName }}
        </div>
      </div>
    </div>
    <!-- 修改业务组件弹窗 -->
    <div v-if="isshoweditdia" class="editBusinesDia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">修改大屏中业务组件</div>
        <div class="line-close" @click="closeeditdia()">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div
          class="dia-main-addline"
        >
          <div class="dia-main-inputline">
            <div class="inputline-name">业务标题</div>
            <input v-model="editmes.cockpitAssemblyName" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">英文名</div>
            <input v-model="editmes.cockpitAssemblyEnName" class="inputline-value" />
          </div>
          <div class="addline-icon">
            <div class="select-name">布局位置</div>
            <div class="addline-select-line">
              <select v-model="editmes.layout" class="selcect-one">
                <option value="left">左边</option>
                <option value="center">中间</option>
                <option value="right">右侧</option>
              </select>
            </div>
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">长度占比</div>
            <input v-model="editmes.assemblyLong" type="number" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">高度占比</div>
            <input v-model="editmes.assemblyHeight" type="number" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">logo选择</div>
            <input type="file" accept="image/*" @change="getFile" />
          </div>
          <div class="addline-but">
            <div class="addline-but1" @click="editSaveMetone()">确认保存基础信息</div>
          </div>
        </div>
        <div class="base-coms-sty-view">
          <div class="coms-sty-view-title">基础组件配置</div>
          <div v-for="(comsitem,comsindex) in editmes.cockpitAssemblyContentList" :key="comsindex" class="coms-sty-view-line">
            <div class="dia-main-inputline">
              <div class="inputline-name">组件编码</div>
              <input v-model="comsitem.unitCode" class="inputline-value" />
            </div>
            <div class="dia-main-inputline">
              <div class="inputline-name">长度占比</div>
              <input v-model="comsitem.width" type="number" class="inputline-value" />
            </div>
            <div class="dia-main-inputline">
              <div class="inputline-name">高度占比</div>
              <input v-model="comsitem.height" type="number" class="inputline-value" />
            </div>
            <div class="dia-main-inputline">
              <div class="inputline-name">x轴位置</div>
              <input v-model="comsitem.xAxis" type="number" class="inputline-value" />
            </div>
            <div class="dia-main-inputline">
              <div class="inputline-name">y轴位置</div>
              <input v-model="comsitem.yAxis" type="number" class="inputline-value" />
            </div>
            <div class="addline-icon">
              <div class="select-name">数据来源</div>
              <div class="addline-select-line">
                <select v-model="comsitem.dataSources" class="selcect-one">
                  <!-- <option :value="0">动态数据</option>
                  <option :value="1">固定数据</option> -->
                  <option
                    v-for="(comitem, comindex) in dataSourcesList"
                    :key="comindex+'dataSources'"
                    :value="comitem.id"
                  >
                    <div v-if="comitem"> {{ comitem.name }}</div>
                  </option>
                </select>
              </div>
            </div>
            <div class="addline-icon">
              <div class="select-name">组件类型</div>
              <div class="addline-select-line">
                <select v-model="comsitem.showType" class="selcect-one">
                  <option
                    v-for="(zhcomitem, zhcomindex) in compnentsList"
                    :key="zhcomindex"
                    :value="zhcomitem.typ"
                  >
                    {{ zhcomitem.des }}
                  </option>
                </select>
              </div>
            </div>
          </div>
          <div class="addline-but">
            <div class="addline-but1" @click="editSaveMettwo()">保存单元组件信息</div>
          </div>
        </div>
      </div>
      <!-- <div class="bottom-bar">
        <div class="bottom-bar-cancel" @click="closeeditdia()">取消</div>
        <div class="bottom-bar-confirm" @click="editSaveMet()">确认</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getTitleList } from "@/components/getnameurl";
export default {
  name: "LeftStepBar",
  data() {
    return {
      // 修改业务组件的信息
      editmes: {},
      isshoweditdia: false,
      compnentsList: [],
      // 步骤条主要信息
      stepList: [
        // {
        //   typename: "底图配置",
        //   isshowChild: false,
        //   navindex: -2
        // },
        {
          typename: "页眉页脚配置",
          isshowChild: false,
          navindex: -1
        }
        // {
        //   typename: "基地概览", isshowChild: true,
        //   child: [
        //     {
        //       assemblyCode: itemone.assemblyCode,
        //       assemblyHeight: itemone.assemblyHeight,
        //       assemblyLong: itemone.assemblyLong,
        //       cockpitAssemblyCode: itemone.cockpitAssemblyCode,
        //       cockpitAssemblyEnName: itemone.cockpitAssemblyEnName,
        //       cockpitAssemblyId: itemone.cockpitAssemblyId,
        //       cockpitAssemblyName: itemone.cockpitAssemblyName,
        //       layout: itemone.layout }
        //   ]
        // }
      ],
      nowNavindex: -1,
      nowstepid: 1,
      // 未处理的导航栏信息
      cockpitNavigationList: [],
      layoutList: [],
      dataSourcesList: [{
        name: '固定数据', id: 1
      },
      {
        name: '动态数据', id: 0
      }
      ]
    };
  },
  mounted() {
    this.gettemplemes();
    this.getcomponentsMesList();
  },
  methods: {
    // 导航栏标题选择
    selectTitlemes(e) {
      this.nowNavindex = e.navindex;
      this.$emit("getnavindex", e.navindex);
    },
    // 选择具体哪个业务组件
    slectedStep(e) {
      // 打开弹窗,进行操作
      if (e) {
        console.log(e)
        this.editmes = e || {};
        if (this.editmes.cockpitAssemblyContentList && this.editmes.cockpitAssemblyContentList[0]) {
          const newcomslist = this.editmes.cockpitAssemblyContentList
          let lislist = []
          newcomslist.forEach(
            (itemone, indexone) => {
              if (itemone[0]) {
                lislist = lislist.concat(itemone)
              }
            }
          )
          this.editmes.cockpitAssemblyContentList = lislist
        } else {
          this.editmes.cockpitAssemblyContentList = []
        }

        this.isshoweditdia = true;
      } else {
        this.$message.warning("出错了呜呜呜！");
      }
    },
    // 关闭修改业务组件导航栏
    closeeditdia() {
      this.editmes = {}
      this.isshoweditdia = false
    },
    // 保存业务组件修改的信息--保存基础信息
    async editSaveMetone() {
      let editcomsMes = this.editmes
      // let comsmes = this.compnentsList[editcomsMes.componentsindex]
      // let allcomslist = await this.getcomsallmes(comsmes.assemblyId)
      console.log(editcomsMes)
      let params = {
        assemblyHeight: Number(editcomsMes.assemblyHeight),
        assemblyLong: Number(editcomsMes.assemblyLong),
        // cockpitAssemblyContentDTOList: allcomslist,
        cockpitAssemblyId: editcomsMes.cockpitAssemblyId,
        cockpitAssemblyName: editcomsMes.cockpitAssemblyName,
        cockpitAssemblyEnName: editcomsMes.cockpitAssemblyEnName,
        layout: editcomsMes.layout
      }
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpitAssembly/edit'
      let formData = new FormData();
      formData.append('assemblyHeight', params.assemblyHeight)
      formData.append('assemblyLong', params.assemblyLong)
      formData.append('cockpitAssemblyId', params.cockpitAssemblyId)
      formData.append('cockpitAssemblyName', params.cockpitAssemblyName)
      formData.append('cockpitAssemblyEnName', params.cockpitAssemblyEnName)
      formData.append('layout', params.layout)
      if (editcomsMes.icon && editcomsMes.icon !== '') {
        formData.append('file', editcomsMes.icon)
      }
      axios({
        method: "POST",
        url: requrl,
        data: formData,
        timeout: 10000,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(
        res => {
          if (res.data.code === 1) {
            this.$message.success("修改成功！")
            // this.closeeditdia()
            // this.editmes = {}
            // this. gettemplemes()
          }
        }
      )
      // this.$message.success("修改成功！");
    },
    // 保存业务组件修改的信息--保存业务组件信息
    editSaveMettwo() {
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpitAssembly/editAssemblyContent'
      let newlist = this.editmes.cockpitAssemblyContentList
      newlist.forEach(
        (itemone, indexone) => {
          axios({
            method: "POST",
            url: requrl,
            data: itemone,
            timeout: 10000
          }).then(
            res => {
              if (res.data.code === 1) {
                this.$message.success("修改成功！")
                // this.closeeditdia()
                // this.editmes = {}
                // this.gettemplemes()
              }
            }
          )
        }
      )
      // this.closeeditdia()
      // console.log(this.editmes)
      // this.$message.success("修改成功！");
    },
    // 获取侧边栏选中的导航栏
    gettemplemes() {
      let query = this.$route.query;
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/cockpit/queryInfo";
      if (query.organizationMark) {
        axios({
          method: "GET",
          url: requrl,
          headers: {
            organizationMark: query.organizationMark
          }
        }).then((response) => {
          let mes = response.data.data;
          if (mes) {
            // console.log(mes)
            this.templemessage = mes;
            // this.topscreentitle = mes.cockpitName;
            this.cockpitNavigationList = mes.cockpitNavigationList || [];
            if (this.cockpitNavigationList[0]) {
              this.cockpitNavigationList.forEach(async (item, index) => {
                let stepmes = {
                  typename: item.navigationName,
                  isshowChild: true,
                  navindex: index,
                  child: []
                };
                console.log(item);
                stepmes.child = await this.getbusinessMes(
                  item.cockpitNavigationId,
                  index
                );
                this.stepList.push(stepmes);
                console.log('test0706', this.stepList)
              });
            }
          }
        });
      }
    },
    // 获取当前导航组件下的业务组件
    getbusinessMes(id, i) {
      if (!id) {
        this.$message.error("无侧边导航栏id-006!");
        return;
      }
      let query = this.$route.query;
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/cockpitAssembly/queryByNavigation";
      let param = {
        cockpitNavigationId: id
      };
      if (query.organizationMark) {
        return new Promise((resolve, reject) => {
          axios({
            method: "GET",
            url: requrl,
            params: param,
            headers: {
              organizationMark: query.organizationMark
            }
          }).then((response) => {
            let mes = response.data.data;
            if (mes) {
              let navmes = [];
              if (mes.left && mes.left[0]) {
                // navmes = navmes.concat(mes.left)
                mes.left.forEach((itemone, indexone) => {
                  let navmesline = {
                    ...itemone,
                    cockpitNavigationId: id
                  };
                  navmes.push(navmesline);
                });
              }
              if (mes.middle && mes.middle[0]) {
                // navmes = navmes.concat(mes.center)
                mes.middle.forEach((itemone, indexone) => {
                  let navmesline = {
                    ...itemone,
                    cockpitNavigationId: id
                  };
                  navmes.push(navmesline);
                });
              }
              if (mes.middleTop && mes.middleTop[0]) {
                // navmes = navmes.concat(mes.center)
                mes.middleTop.forEach((itemone, indexone) => {
                  let navmesline = {
                    ...itemone,
                    cockpitNavigationId: id
                  };
                  navmes.push(navmesline);
                });
              } if (mes.middleBottom && mes.middleBottom[0]) {
                // navmes = navmes.concat(mes.center)
                mes.middleBottom.forEach((itemone, indexone) => {
                  let navmesline = {
                    ...itemone,
                    cockpitNavigationId: id
                  };
                  navmes.push(navmesline);
                });
              }
              if (mes.middleTopBottom && mes.middleTopBottom[0]) {
                // navmes = navmes.concat(mes.center)
                mes.middleTopBottom.forEach((itemone, indexone) => {
                  let navmesline = {
                    ...itemone,
                    cockpitNavigationId: id
                  };
                  navmes.push(navmesline);
                });
              }
              if (mes.right && mes.right[0]) {
                // navmes = navmes.concat(mes.right)
                mes.right.forEach((itemone, indexone) => {
                  let navmesline = {
                    ...itemone,
                    cockpitNavigationId: id
                  };
                  navmes.push(navmesline);
                });
              }
              resolve(navmes);
            } else {
              resolve([])
            }
          });
        });
      }
    },
    // 获取一个所有组件基础信息
    getcomponentsMesList() {
      this.compnentsList = getTitleList();
    },
    // 图片选择返回数据
    getFile(event) {
      const files = event.target.files;
      let filename = files[files.length - 1].name; // 只有一个文件
      if (filename.lastIndexOf(".") <= 0) {
        return alert("请添加一张图片!"); // 判断图片是否有效
      }
      const fileReader = new FileReader(); // 内置方法new FileReader()   读取文件
      // fileReader.readAsDataURL(files[files.length - 1]);
      fileReader.readAsBinaryString(files[files.length - 1]);
      fileReader.addEventListener("load", () => {
        this.editmes.icon = files[files.length - 1]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.stepbar-view {
  width: 184px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .stepbar-view-main {
    width: 184px;
    .view-main-title {
      width: 184px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      background-color: #00171c;
      border: #003641 1px solid;
      cursor: pointer;
      .title-lineone {
        height: 40px;
        background: #00171c;
        margin-left: 10px;
      }
    }
    .view-main-value {
      width: 184px;
      // height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 14px;
      .view-main-value-line {
        border: #003641 1px solid;
        cursor: pointer;
      }
      .view-main-value-line:hover {
        color: #24a8ad;
      }
    }
  }
  .view-main-value-line-active {
    color: #24a8ad;
  }
}
.editBusinesDia {
  background: #303640;
  border: 1px solid #005c6f;
  border-radius: 7px;
  position: fixed;
  top: 15%;
  left: 40%;
  background-color: #005c6f;
  z-index: 99;
  .top-bar {
    width: 460px;
    height: 10px;
    background: linear-gradient(90deg, #3581fb 0%, #00faad 100%);
    border-radius: 7px 7px 0px 0px;
  }
  .top-title-line {
    width: 450px;
    height: 35px;
    line-height: 35px;
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #484a4e;
    .line-title {
      height: 20px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      letter-spacing: 2px;
    }
    .line-close {
      color: #10d7c4;
      cursor: pointer;
    }
    .line-close:hover {
      color: #ffffff;
    }
  }
  .screen-dia-main {
    width: 462px;
    padding: 20px 10px;
    max-height: 550px;
    overflow-y: auto;
    overflow-x: hidden;
    .dia-main-inputline {
      width: 442px;
      // background-color: #00FAAD;
      display: flex;
      justify-content: center;
      align-items: center;
      .inputline-name {
        width: 104px;
        height: 24px;
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
      }
      .inputline-value {
        width: 410px;
        height: 32px;
        box-sizing: border-box;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #494e57;
        box-sizing: border-box;
        outline: 0;
      }
    }
    .addline-icon {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 48px;
        .addline-icon-line {
          width: 221px;
          height: 48px;
          line-height: 48px;
          display: flex;
          align-items: center;
          margin-top: 10px;
          .icon-line-name {
            width: 90px;
            height: 48px;
            line-height: 48px;
            text-align: center;
          }
          .icon-line-value {
            width: 48px;
            height: 48px;
            text-align: center;
            .not-iconurl {
              border: 1px dashed #d9d9d9;
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
            }
            .not-iconurl:hover {
              border-color: #1caf7e;
            }
            .not-iconsty {
              font-size: 20px;
              color: #8c939d;
              width: 48px;
              height: 48px;
              line-height: 48px;
              text-align: center;
            }
          }
        }
        .select-name{
            width: 90px;
            height: 48px;
            line-height: 48px;
            text-align: center;
        }
        .addline-select-line {
          margin-top: 12px;
          height: 36px;
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          margin-bottom: 10px;
          .selcect-one {
            width: 355px;
            color: #00faad;
            // margin-top: 12px;
            height: 36px;
            line-height: 36px;
            background-color: transparent;
            border: #00faad dashed 1px;
            cursor: pointer;
            option {
              background-color: #005c6f !important;
              color: #fff;
              cursor: pointer;
            }
          }
        }
    }
    .dia-main-addline {
      width: 442px;
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 24px;
      border-bottom: #00faad 1px dashed;
      padding-bottom: 16px;
      margin-bottom: 10px;
    }
    .addline-but {
        width: 442px;
        display: flex;
        justify-content: space-around;
        margin-top: 15px;
        .addline-but1 {
          color: #00faad;
          border: 1px solid #00faad;
          cursor: pointer;
          padding: 5px 10px;
        }
        .addline-but1:hover {
          color: #fff;
        }
        .addline-but2 {
          color: #3581fb;
          border: 1px solid #3581fb;
          cursor: pointer;
          padding: 5px 10px;
        }
        .addline-but2:hover {
          color: #fff;
        }
    }
    .dia-main-addline:last-of-type {
      padding-bottom: 0;
      margin: 0;
      border: none;
    }
    .base-coms-sty-view{
      width: 441px;
      .coms-sty-view-title{
        width: 441px;
        height: 36px;
        line-height: 36px;
        text-align: left;
        background-color: #00faad;
      }
      .coms-sty-view-line{
        width: 441px;
      }
    }
  }
  .bottom-bar {
    width: 462px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    .bottom-bar-cancel {
      width: 96px;
      height: 33px;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #0cb9ae;
      color: #0cb9ae;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }
    .bottom-bar-cancel:hover {
      color: #00faad;
    }
    .bottom-bar-confirm {
      width: 96px;
      height: 33px;
      background: #0cb9ae;
      border-radius: 5px 5px 5px 5px;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }
    .bottom-bar-confirm:hover {
      color: #10fab4;
    }
  }
}
</style>
